<template>
  <div id="zonghechart1">
    <div
      class="chartradar"
      ref="chartradar"
    ></div>
    <div class="chart-title">
      <img src="@/assets/img/login/left-1.png">
      <div>AI智能分析</div>
    </div>
    <div class="chart-select">
      <el-select
        v-model="active"
        placeholder="请选择"
        @change="handleChange"
      >
        <el-option
          v-for="item in options"
          :key="item"
          :label="item"
          :value="item"
        ></el-option>
      </el-select>
    </div>
    <!-- <div class="chart-info">
      <el-icon>
        <ChatLineSquare />
      </el-icon>
      <div>能力详情</div>
    </div>
    <div
      class="chart-btn all-btn"
      @click="$message.success('加速研发中，敬请期待~')"
    >
      <el-icon>
        <Setting />
      </el-icon>
      <div>综合能力设定</div>
    </div> -->
  </div>
</template>
  
  <script>
export default {
  data() {
    return {
      chartDom: null,
      myChart: null,
      active: "",
      options: [],
      data: [],
    };
  },
  mounted() {
    this.myChart = this.$echarts.init(this.$refs.chartradar);
    this.getData();
    // this.initChartRadar();
  },
  methods: {
    initChartRadar(indicator, data) {
      // this.chartDom = this.$refs.chartradar;
      // this.myChart = this.$echarts.init(this.chartDom);
      const option = {
        tooltip: {},
        radar: {
          indicator: indicator,
          radius: "50%",
        },

        series: [
          {
            name: "综合能力评定",
            type: "radar",
            areaStyle: {},
            data: [
              {
                value: data,
              },
            ],
          },
        ],
      };
      this.myChart.setOption(option, true);
    },
    getData() {
      if (this.myChart) {
        this.myChart.showLoading();
      }
      const url = "/tes/graduation/statistic";
      this.$axios
        .get(url)
        .then((response) => {
          const res = response.data;
          // res.radar.find((item) => item.name === "2016").value = [
          //   60, 20, 0, 0, 0, 0, 0,
          // ];
          // res.radar.find((item) => item.name === "2015").value = [
          //   5, 20, 0, 0, 0, 0, 0,
          // ];
          this.data = res.radar;
          this.options = this.data.map((item) => item.name);
          this.active = this.options[0];
          this.handleChange(this.options[0]);
        })
        .finally(() => {
          this.myChart.hideLoading();
        });
    },
    handleChange(val) {
      let obj = this.data.find((item) => item.name === val);
      let indicator = obj.indicator;
      let data = obj.value;
      this.initChartRadar(indicator, data);
    },
  },
};
</script>
<style lang="scss" scoped>
#zonghechart1 {
  position: relative;
  .chartradar {
    width: 100%;
    height: 360px;
  }
  .chart-select {
    width: 110px;
    position: absolute;
    right: 0;
    top: 0;
  }
  .chart-title {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    position: absolute;
    top: 0;
    left: 0;
    font-size: 14px;
    color: #3761ac;
    img {
      width: 30px;
    }
  }
  .chart-info {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    position: absolute;
    bottom: 0;
    right: 0;
    font-size: 14px;
    color: #457aff;
    cursor: pointer;
    &:hover {
      color: #3761ac;
    }
  }
  .chart-btn {
    position: absolute;
    top: -67px;
    right: -22px;
    height: 30px;
    line-height: 30px;
  }
}
</style>